<template>
	<!-- 我的订单 -->
	<view class="page">
		<view class="">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view @click="tabClick(idx)"
					style="display: inline-block;color: #333333;padding: 5px 12px;margin-right: 0px;min-width: 25px;text-align: center;"
					v-for="(obj,idx) in tabs" :key="idx">
					<text>{{obj}}</text>
					<view style="height: 2px;margin-top: 5px;background-color: #007AFF;" v-if="idx == tabindex"></view>
				</view>
			</scroll-view>
		</view>
		<view style="flex: 1;overflow-y: auto;">
			<view v-for="idx in 10">
				<!-- one img -->
				<view style="background-color: #FFFFFF;padding: 6px 12px;display: flex;flex-direction: row;">
					<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
						<text
							style="flex: 1;font-size: 12px;color: #333333;margin-right: 5px;">李小龙去世48年，儿子离奇死亡，唯一的女儿李香凝如今怎么样</text>
						<text style="flex: 1;font-size: 12px;color: #999999;">学术会议|2020-02-1</text>
					</view>
					<image
						src="https://p9.toutiaoimg.com/img/pgc-image/3285ec8f26ae40619c59f32ab9ebca96~tplv-tt-cs0:640:360.jpg"
						style="width: 110px;height: 64px;" mode=""></image>
					<!-- line -->
					<view
						style="position: absolute;left: 0;bottom: 0;right: 0;height: 1px;background-color: #ebebeb;" />
				</view>
				<!-- only text -->
				<view style="background-color: #FFFFFF;padding: 6px 12px;display: flex;flex-direction: column">
					<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
						<text
							style="flex: 1;font-size: 12px;color: #333333;margin-right: 5px;">艺人张国荣，傍晚于中环广场的文华东方酒店24楼坠楼身亡，终年46岁</text>
						<text style="flex: 1;font-size: 12px;color: #999999;">学术会议|2020-02-1</text>
					</view>
					<!-- line -->
					<view
						style="position: absolute;left: 0;bottom: 0;right: 0;height: 1px;background-color: #ebebeb;" />
				</view>
				<!-- three img -->
				<view style="background-color: #FFFFFF;padding: 6px 12px;display: flex;flex-direction: column">
					<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
						<text
							style="flex: 1;font-size: 12px;color: #333333;margin-right: 5px;">马家军四大头目下场：马鸿逵临终想家痛哭，马步芳遥控部下打游击</text>
						<text style="flex: 1;font-size: 12px;color: #999999;">学术会议|2020-02-1</text>
					</view>
					<view style="display: flex;margin-top: 5px;">
						<image
							src="https://p5.toutiaoimg.com/img/pgc-image/242c2e5825d845ffb83ab6cba45b3bb8~tplv-tt-cs0:640:360.jpg"
							style="width: 110px;height: 64px;margin-right: 5px;" mode=""></image>
						<image
							src="https://p3.toutiaoimg.com/img/pgc-image/dcaedd765aa44006847a3f29be02cdc0~tplv-tt-cs0:796:1000.jpg"
							style="width: 110px;height: 64px;margin-right: 5px;" mode=""></image>
						<image
							src="https://p3.toutiaoimg.com/img/pgc-image/6dd2bbc12a044d668a188228d7dc49e9~tplv-tt-cs0:640:360.jpg"
							style="width: 110px;height: 64px;margin-right: 5px;" mode=""></image>
					</view>
					<!-- line -->
					<view
						style="position: absolute;left: 0;bottom: 0;right: 0;height: 1px;background-color: #ebebeb;" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					"全部",
					"学术会议",
					"娱乐活动",
					"校区回顾",
					"官方通知",
				],
				tabindex: 0,
			}
		},
		methods: {
			tabClick(idx) {
				this.tabindex = idx;
			}
		}
	}
</script>

<style>
	.page {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
	}

	.scroll-view_H {
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
		overflow: hidden;
		width: calc(100vw - 24px);
		background-color: #FFFFFF;
	}
</style>
